import 'package:flutter/material.dart';
import 'package:kq_flutter_core_widget/utils/kq_screen_util.dart';
import 'package:get/get.dart';
import 'package:kq_flutter_core_widget/utils/toast_util.dart';
import 'package:kq_flutter_widgets/widgets/button/kq_outline_button.dart';
import 'package:kq_flutter_widgets/widgets/dropDownMenu/kq_drop_down_menu.dart';
import 'package:kq_flutter_widgets/widgets/titleBar/kq_title_bar.dart';

/// 下拉菜单演示
class DropDownMenuDemo extends StatefulWidget {
  const DropDownMenuDemo({Key? key}) : super(key: key);

  @override
  DropDownMenuDemoState createState() => DropDownMenuDemoState();
}

class DropDownMenuDemoState extends State<DropDownMenuDemo> {
  final KqDropDownMenuController menuController = KqDropDownMenuController();
  final KqDropDownMenuController menuController2 = KqDropDownMenuController();

  KqDropMenuData? selectedMenu;
  KqDropMenuData? selectedMenu2;
  KqDropMenuData? selectedMenu3;

  GlobalKey buttonKey = GlobalKey();
  GlobalKey buttonKey2 = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: KqHeadBar(
        headTitle: selectedMenu?.title ?? '设备利用率',
        showDropIcon: true,
        menuController: menuController,
        onTapTitle: () {
          menuController.showFullWidthMenu();
        },
        dropMenuData: [
          KqDropMenuData('设备利用率',
              titleId: '0', selected: selectedMenu?.titleId == '0'),
          KqDropMenuData('开机利用率',
              titleId: '1', selected: selectedMenu?.titleId == '1'),
          KqDropMenuData('开机利用率2',
              titleId: '2', selected: selectedMenu?.titleId == '2'),
          KqDropMenuData('开机利用率3',
              titleId: '3', selected: selectedMenu?.titleId == '3'),
          KqDropMenuData('开机利用率4',
              titleId: '4', selected: selectedMenu?.titleId == '4'),
          KqDropMenuData('开机利用率5',
              titleId: '5', selected: selectedMenu?.titleId == '5'),
          KqDropMenuData('开机利用率6',
              titleId: '6', selected: selectedMenu?.titleId == '6'),
        ],
        onSelected: (menuData) {
          setState(() {
            selectedMenu = menuData;
          });
        },
        back: () {
          Get.back();
        },
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            SizedBox(
              height: 40.r,
            ),
            KqDropDownMenu(
              menuController: menuController2,
              menuData: [
                KqDropMenuData('设备利用率',
                    titleId: '0', selected: selectedMenu2?.titleId == '0'),
                KqDropMenuData('开机利用率',
                    titleId: '1', selected: selectedMenu2?.titleId == '1'),
                KqDropMenuData('开机利用率2',
                    titleId: '2', selected: selectedMenu2?.titleId == '2'),
                KqDropMenuData('开机利用率3',
                    titleId: '3', selected: selectedMenu2?.titleId == '3'),
                KqDropMenuData('开机利用率4',
                    titleId: '4', selected: selectedMenu2?.titleId == '4'),
                KqDropMenuData('开机利用率5',
                    titleId: '5', selected: selectedMenu2?.titleId == '5'),
                KqDropMenuData('开机利用率6',
                    titleId: '6', selected: selectedMenu2?.titleId == '6'),
              ],
              onSelected: (menuData) {
                setState(() {
                  selectedMenu2 = menuData;
                });
                KqToast.showNormal(menuData.title);
              },
              child: KqOutlineButton(
                title: "嵌套使用",
                onTap: () {
                  menuController2.showFullWidthMenu();
                },
              ),
            ),
            SizedBox(
              height: 40.r,
            ),
            KqOutlineButton(
              key: buttonKey,
              title: "单独使用（宽度充满）",
              onTap: () {
                KqDropDownMenu.showFullWidthMenu(
                    context: buttonKey.currentContext!,
                    menuData: [
                      KqDropMenuData('设备利用率',
                          titleId: '0',
                          selected: selectedMenu3?.titleId == '0'),
                      KqDropMenuData('开机利用率',
                          titleId: '1',
                          selected: selectedMenu3?.titleId == '1'),
                      KqDropMenuData('开机利用率2',
                          titleId: '2',
                          selected: selectedMenu3?.titleId == '2'),
                      KqDropMenuData('开机利用率3',
                          titleId: '3',
                          selected: selectedMenu3?.titleId == '3'),
                      KqDropMenuData('开机利用率4',
                          titleId: '4',
                          selected: selectedMenu3?.titleId == '4'),
                      KqDropMenuData('开机利用率5',
                          titleId: '5',
                          selected: selectedMenu3?.titleId == '5'),
                      KqDropMenuData('开机利用率6',
                          titleId: '6',
                          selected: selectedMenu3?.titleId == '6'),
                    ]);
              },
            ),
            SizedBox(
              height: 40.r,
            ),
            KqOutlineButton(
              key: buttonKey2,
              title: "单独使用（气泡样式）",
              onTap: () {
                KqDropDownMenu.showPopMenu(
                    context: buttonKey2.currentContext!,
                    menuData: [
                      KqDropMenuData('设备利用率',
                          titleId: '0',
                          selected: selectedMenu3?.titleId == '0'),
                      KqDropMenuData('开机利用率',
                          titleId: '1',
                          selected: selectedMenu3?.titleId == '1'),
                      KqDropMenuData('开机利用率2',
                          titleId: '2',
                          selected: selectedMenu3?.titleId == '2'),
                      KqDropMenuData('开机利用率3',
                          titleId: '3',
                          selected: selectedMenu3?.titleId == '3'),
                      KqDropMenuData('开机利用率4',
                          titleId: '4',
                          selected: selectedMenu3?.titleId == '4'),
                      KqDropMenuData('开机利用率5',
                          titleId: '5',
                          selected: selectedMenu3?.titleId == '5'),
                      KqDropMenuData('开机利用率6',
                          titleId: '6',
                          selected: selectedMenu3?.titleId == '6'),
                    ]);
              },
            )
          ],
        ),
      ),
    );
  }
}
